<template>
    <Card v-bind="$attrs" title="峰值评测">
        <template #extra>
              <RangePicker
            @change="handleDateChange"
            v-model:value="dateRange"
            picker="date"
            valueFormat="YYYY-MM-DD"
            />
        </template>
 
      <div ref="chartRef" :style="{ height, width }"></div>
      <div class="text-center position-absolute w-full bottom-4"><a @click="handleToDetail">点击查看数据详情</a></div>
    </Card>
  </template>
  <script lang="ts"></script>
  <script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { Card, RangePicker } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { PropType } from 'vue';
  import { defHttp } from '@/utils/http/axios';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '360px',
    },
  });
  
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  onMounted(async () => {
  });
  const dateRange = ref([])
  const getData = async (areaId) => {
    getInstance()?.showLoading();
    areaIdTemp = areaId;
    console.log(dateRange.value, 'rree')
    const params = dateRange.value && dateRange.value.length ? {
        areaId,
        startDate: dateRange.value[0],
        endDate: dateRange.value[1] 
    } : {
        areaId
    }
    let res = [];
    try {
        res = await defHttp.get({
        url: '/statistic/dayPowerStatistic',
        params
    })
    } finally {
        getInstance()?.hideLoading();
    }
    
     
    setOptions(
        {
            xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        },
        yAxis: {
            type: 'value',

        },
        series: [
            {
            data: res,
            name: '日电量统计',
            type: 'line',
            areaStyle: {}
            }
        ]
    })
  };
  let areaIdTemp = '';
  const handleDateChange = (dates: any) => {
    getData(areaIdTemp);
  };
  const reload = (areaId) => {
    areaIdTemp = areaId;
    getData(areaIdTemp);
  }
  const handleToDetail = () => {
    router.push({
      name: 'PowerList',
    })
  }
  defineExpose({
    reload
  });
  </script>
  